<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>待检任务</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="taskQuery" inline>
        <el-form-item label="单据编码">
          <el-input v-model="taskQuery.documentsId"/>
        </el-form-item>
        <el-form-item label="物资名称">
          <el-input v-model="taskQuery.materialName"/>
        </el-form-item>
        <el-form-item label="检测类型">
          <el-input v-model="taskQuery.detectionName"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadTasks" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button @click="refresh" type="primary"plain><el-icon><Refresh /></el-icon>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="tasks" border stripe ref="tasksTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="documentsId" label="单据编码"/>
        <el-table-column prop="detectionName" label="检测项"/>
        <el-table-column prop="materialNumber" label="物资编码"/>
        <el-table-column prop="materialName" label="物资名称"/>
        <el-table-column prop="taskNumber" label="待检数量"/>
        <el-table-column prop="location" label="位置"/>
        <el-table-column prop="taskStatus" label="状态"/>
        <el-table-column label="操作" width="330">
            <el-link @click="showIncoming" type="primary">
              来料检验
            </el-link>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--  分页栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>

  <el-dialog v-model="incomingEditWinDialogVisible"
             title="来料检验" width="50%">
    <template #default>
      <el-form v-model="editIncoming" label-width="auto">
        <el-form-item label="来料检验单名称">
          <el-input v-model="editIncoming.incomingName"/>
        </el-form-item>
        <el-form-item label="供应商编码">
          <el-input v-model="editIncoming.vendorId"/>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="editIncoming.vendorName"/>
        </el-form-item>
        <el-form-item label="供应商批次号">
          <el-input v-model="editIncoming.vendorNumber"/>
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="editIncoming.materialNumber"/>
        </el-form-item>
        <el-form-item label="产品物料名称">
          <el-input v-model="editIncoming.materialName"/>
        </el-form-item>
        <el-form-item label="接收数量">
          <el-input v-model="editIncoming.receptionNumber"/>
        </el-form-item>
        <el-form-item label="检测数量">
          <el-input v-model="editIncoming.testNumber"/>
        </el-form-item>
        <el-form-item label="不合格数">
          <el-input v-model="editIncoming.unqualifiedNumber"/>
        </el-form-item>
        <el-form-item label="检测结果">
          <el-input v-model="editIncoming.incomingResult"/>
        </el-form-item>
        <el-form-item label="来料日期">
          <el-date-picker
              v-model="editIncoming.createTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测日期">
          <el-date-picker
              v-model="editIncoming.testTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测人员">
          <el-input v-model="editIncoming.Inspectors"/>
        </el-form-item>
        <el-form-item label="单据状态">
          <el-input v-model="editIncoming.incomingStatus"/>
        </el-form-item>
      </el-form>
    </template>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
      </div>
    </template>
  </el-dialog>






</template>
<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import taskRequest from "@/api/task.js";

let taskQuery = ref({});
// 查询的项目列表
let tasks = ref([]);
let tasksTable = ref(null);
// 当前页码，默认1
let curPage = ref(1);
// 总条数，默认0
let total = ref(0);
//弹窗标记
let incomingEditWinDialogVisible = ref(false);
//编辑的项目对象
let editIncoming = ref({});


function refresh(){
  taskQuery.value = {};
  loadTasks();
}



function showIncoming() {
  incomingEditWinDialogVisible.value = true;
}
function cancelEdit(){
  incomingEditWinDialogVisible.value = false;
}





function changePage(value) {
  curPage.value = value;
  loadTasks();
}
//加载项目列表
function loadTasks() {
  // 调用API来查询项目列表
  taskRequest.loadTasks(taskQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    // 将查询的列表赋值给defects
    tasks.value = res.data.list;
  })
}


onMounted( () => {
  loadTasks();
});



</script>